//个人中心=> 更换头像
// const BASE_URL = "http://api-breakingnews-web.itheima.net";

myUserInfo(res=>{
  let { user_pic } = res.data.data;
    if (user_pic) {
      $("#image").attr("src", user_pic);
    }
    handleCropper();
})

function handleCropper() {
  // 一. 初始化裁剪插件
  const image = document.getElementById("image");
  let cropper = new Cropper(image, {
    aspectRatio: 1, // 裁剪图层的横纵比例
    preview: $(".img-preview"), // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
  });
  //选择图片
  $(".select").on("click", function () {
    $("#file").click();
  });

  $("#file").on("change", function () {
    let file = this.files[0];
    let url = URL.createObjectURL(file);
    cropper.replace(url);
  });

  // 上传
  $(".sure").on("click",function () {
    /**
     * 1. cropper 插件转化base64 的步骤
     */
    //1.1 格式转换
    let canvas = cropper.getCroppedCanvas({
      // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
      width: 100,
      height: 100,
    });
    //1.2 canvas图像 -> base64字符串
    let base64Str = canvas.toDataURL("image/jpeg");
    //1.3 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
    base64Str = encodeURIComponent(base64Str);

    let data = `avatar=${base64Str}`;

    axios
      .post(`/my/update/avatar`, data, {
        headers: {
          Authorization: localStorage.getItem("token"),
        },
      })
      .then((res) => {
        console.log(res);
        if (res.data.status === 0) {
          layer.msg('图片更换成功', {
            icon: 1,
            time: 2000,
          });
        }
        //首页头像更换显示
        window.parent.my_getUserInfo();
      });
  });
}
